import { useUserState } from '@/hooks/useUserState';
import { encryptionAES } from '@/utils/Aes';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { LoginForm, ProFormText } from '@ant-design/pro-components';
import { history } from '@umijs/max';
import { Card, message, Spin, Tabs, TabsProps } from 'antd';
import React, { useState } from 'react';
import styles from './index.less';

import { passwordLogin } from '../api';

const PasswordLoginForm = ({
  loading,
  handleSubmit,
}: {
  loading: any;
  handleSubmit: (data: any) => void;
}) => {
  return (
    <LoginForm
      initialValues={{
        autoLogin: true,
      }}
      onFinish={async (values) => {
        handleSubmit(values as any);
      }}
      submitter={{
        searchConfig: {
          submitText: '登 录',
        },
        submitButtonProps: {
          size: 'large',
          style: {
            width: '100%',
            height: '42px',
            marginTop: '20px',
          },
        },
      }}
    >
      <Spin spinning={loading}>
        <ProFormText
          className={styles.formSelect}
          name="account"
          fieldProps={{
            size: 'large',
            prefix: <UserOutlined />,
          }}
          placeholder={'请输入账号/手机号'}
          rules={[
            {
              required: true,
              message: '账号是必填项！',
            },
          ]}
        />
        <div className={styles.formContainer}>
          <ProFormText.Password
            className={styles.formSelect}
            name="password"
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined />,
            }}
            placeholder={'请输入密码'}
            rules={[
              {
                required: true,
                message: '密码是必填项！',
              },
            ]}
          />
          {/* <div className={styles.registerLinkWrapper}>
            <a className={styles.registerLink} onClick={() => history.push('/user/register')}>
              <FormattedMessage id="app.login.register" defaultMessage="立即注册" />
            </a>
          </div> */}
        </div>
      </Spin>
    </LoginForm>
  );
};

const Login: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const { updateUserInfo } = useUserState();

  //账号密码登录
  const signinHandle = async (values: any) => {
    setLoading(true);
    let data: any = {
      username: values.account,
      password: encryptionAES(values.password),
    };
    const res: any = await passwordLogin(data);
    console.log(res);
    if (res.code === 200) {
      message.success(res?.message);
      const info = {
        username: res?.data?.username,
        name: res?.data?.name,
        avatar: res?.data?.avatar,
      };

      // 更新用户信息
      await updateUserInfo(info);
      history.push('/case-management');
      return;
    } else {
      message.error(res?.message);
    }
    setLoading(false);
  };

  const handleSubmit = (values: any) => {
    signinHandle(values);
  };

  //登录的不同方式
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '密码登录',
      children: (
        <PasswordLoginForm loading={loading} handleSubmit={handleSubmit}></PasswordLoginForm>
      ),
    },
  ];
  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <Card className={styles.form}>
          <div className={styles.loginHeader}>
            <h1>律师案件管理系统</h1>
            <p>请输入您的账号和密码登录系统</p>
          </div>
          <Tabs
            centered
            defaultActiveKey="1"
            items={items}
            size="large"
            className={styles.loginTabs}
          />
        </Card>
      </div>
    </div>
  );
};

export default Login;
